
  <template>
  <div class="common-layout">
    <el-container>
      <el-header align="center" style="font-size: 30px;">部门添加</el-header>
      <el-container>
        <el-aside width="285px" style="margin-top: 50px;">
          <el-input
    v-model="filterText"
    style="width: 150px;"
    placeholder="请输入要筛选的内容"
  />
  <el-button type="primary" :icon="Search" @click="addDialog">查询</el-button>
  <el-tree
        ref="treeRef"
        class="filter-tree"
        :data="DepartTypeList"
        :props="defaultProps"
        style="
          width: 285px;
          border: 0px solid #ccc;
          height: 600px;
          float: left;
        "
        default-expand-all
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        @node-click="handleNodeClick"
      />

        </el-aside>
        <el-main>
          <h3 align="center" style="margin-left: -150px;">部门信息</h3>
          <div style="margin-left: 300px;">
            <el-form-item label="部门上级" :label-width="formLabelWidth">
          <el-input v-model="uptform.departTreeName" autocapitalize="off" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="部门名称" :label-width="formLabelWidth">
          <el-input v-model="form.departmentName" autocapitalize="off" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="部门停用" :label-width="formLabelWidth">
          <el-radio-group v-model="form.departmentStop" style="width: 200px;">
            <el-radio :value="true">启用</el-radio>
            <el-radio :value="false">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="部门类型" :label-width="formLabelWidth">
          <el-select v-model="form.departmentTypeId" placeholder="请选择所属类别" style="width: 200px;">
            <el-option v-for="item in typeData" :label="item.departmentTypeName" :value="item.departmentTypeId" />
          </el-select>
        </el-form-item>
        <el-form-item label="部门序号" :label-width="formLabelWidth">
          <el-input v-model="form.departmentTypeId" autocapitalize="off" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="部门区域" :label-width="formLabelWidth">
          <el-select v-model="form.provinceId" placeholder="请选择省份" style="width: 120px;" @change="getCity()">
            <el-option v-for="item in provinceData" :label="item.provinceName" :value="item.provinceId" style="width: 120px;"  />
          </el-select>
          <el-select v-model="form.cityId" placeholder="请选择市区" style="width: 120px;">
            <el-option v-for="item in cityData" :label="item.cityName" :value="item.cityId" />
          </el-select>
        </el-form-item>
          </div>
        
        <h3 align="center" style="margin-left: -150px;">任职信息</h3>
          <div style="margin-left: 300px;">
            <el-form-item label="直接上级" :label-width="formLabelWidth">
            <el-input v-model="form.directSuperior" autocapitalize="off" style="width: 200px;" />
          </el-form-item>
          <el-form-item label="部门主管" :label-width="formLabelWidth">
            <el-input v-model="form.directSuperiorName" autocapitalize="off" style="width: 200px;" />
          </el-form-item>
          <el-form-item label="分管负责人" :label-width="formLabelWidth">
            <el-input v-model="form.inChargeHead" autocapitalize="off" style="width: 200px;" />
          </el-form-item>
          <el-form-item label="财务主管" :label-width="formLabelWidth">
            <el-input v-model="form.treasurer" autocapitalize="off" style="width: 200px;" />
          </el-form-item>
          <el-form-item label="可查看人员" :label-width="formLabelWidth">
            <el-input v-model="form.viewablePersonnel" autocapitalize="off" style="width: 200px;" />
          </el-form-item>
          </div>
          

        <h3 align="center" style="margin-left: -150px;">组织信息</h3>
          <div style="margin-left: 300px;">
            <el-form-item label="职能体系" :label-width="formLabelWidth">
          <el-select v-model="form.functionalSystemId" placeholder="请选择所属类别" style="width: 200px;">
            <el-option v-for="item in functionData" :label="item.functionalSystemName" :value="item.functionalSystemId" />
          </el-select>
        </el-form-item>
          
        <el-button type="success" :icon="SuccessFilled" @click="addDepart" style="margin-left: 150px;">添加</el-button>
          </div>
          


      
        </el-main>
      </el-container>
    </el-container>
  </div>

</template>
<script lang="ts" setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  Plus,
  Setting,
  SuccessFilled,
} from '@element-plus/icons-vue'
import { reactive, ref, onMounted, watch } from 'vue';
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ElTree } from 'element-plus';
import router from '@/router';

const dialogFormVisible = ref(false);
const formLabelWidth = '140px';
const filterText = ref('');

const filterNode = (value: string, data: any) => {
  if (!value) return true;
  return data.label.includes(value);
};
//级联
const defaultProps = {
  children: 'children',
  label: 'label',
};
const handleNodeClick = (data: any) => {
  console.log(data);
  uptform.departTreeName = data.label;
  uptform.pid = data.value;
  console.log(uptform.pid)
};

const form = reactive({
  departTreeName:'',
  pid: 0,
  functionalSystemId:'',
  departmentTypeId:'',
  departmentName:'',
  departmentStop:true,
  directSuperior:'',
  directSuperiorName:'',
  inChargeHead:'',
  treasurer:'',
  viewablePersonnel:'',
  provinceId:'',
  cityId:''
});

const uptform = reactive({
  departmentName:'',
  departTreeName:'',
  pid: 0,
});
const DepartTypeList = ref([]);
const getDepartType=()=>{
  axios.get('http://localhost:5039/api/Depart/SearchDepartmentTree').then(res=>{
    console.log(res)
    DepartTypeList.value=res.data.data
  })
}
// //父级 级连选择器改变事件 获取pid
// const handGoodsTypeChange = (val: any) => {
//   console.log(val);
//   form.pid = val[val.length - 1];
//   console.log(form);
// };
//添加
const addDialog=()=>{
  dialogFormVisible.value=true
}
const addTree=()=>{
  let pdata=({
    departTreeName:form.departmentName,
    pid:uptform.pid
  })
  axios.post('http://localhost:5039/api/Depart/AddDepartTree',pdata).then(res=>{
    console.log(res)
    if(res.data.code>0){
      getDepartType()
    }
  })
}
const addDepart=()=>{
  axios.post('http://localhost:5039/api/Depart/AddDepart',form).then(res=>{
    console.log(res)
    if(res.data.code>0){
      addTree()
      ElMessage.success('添加成功')
      
    }
  })
}

//部门类型下拉框
const typeData:any=ref([])
const getFunctionData=()=>{
  axios.get('http://localhost:5039/api/Depart/SearchDepartType').then(res=>{
    console.log(res)
    typeData.value=res.data.data
  })
}
//职能部门下拉框
const functionData:any=ref([])
const getTypeData=()=>{
  axios.get('http://localhost:5039/api/Depart/SearchFunction').then(res=>{
    console.log(res)
    functionData.value=res.data.data
  })
}
//省市下拉框
const provinceData:any=ref([])
const getProvince=()=>{
  axios.post('http://localhost:5039/api/Sheep/EnterpriseType').then(res=>{
    console.log(res)
    provinceData.value=res.data.data
  })
}
const cityData:any=ref([])
const getCity=()=>{
  let pdata=({
    provinceId:form.provinceId
  })
  axios.post('http://localhost:5039/api/Sheep/EnterpriseType1',pdata).then(res=>{
    console.log(res)
    cityData.value=res.data.data
  })
}

//钩子函数
onMounted(() => {
  //级联
  getDepartType()
  //部门类型
  getTypeData()
  //职能部门
  getFunctionData()
  getProvince()
});
</script>
